<template>
    <div>
       
        <div class="container ">
            <h2>新增与流失人数统计</h2>
            <el-divider></el-divider>
            <el-form class="form-demo">
                <el-form-item label="统计时段">
                    <el-radio-group v-model="form.time">
                        <el-radio value="month">月</el-radio>
                        <el-radio value="season">季</el-radio>
                        <el-radio value="year">年</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="查找年份" v-if="form.time != 'year'">
                    <el-select v-model="form.year" placeholder="选择年份" placement="top-start">
                        <el-option v-for="year in yearRange" :key="year" :label="year" :value="year" />
                    </el-select>
                </el-form-item>
                <el-row v-else>
                    <el-col :span="12">
                        <el-form-item label="开始年份">
                            <el-select v-model="form.startYear" placeholder="选择年份">
                                <el-option v-for="year in yearRange" :key="year" :label="year" :value="year">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结束年份">
                            <el-select v-model="form.endYear" placeholder="选择年份">
                                <el-option v-for="year in yearRange" :key="year" :label="year" :value="year"
                                    :disabled="year < form.startYear">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-form-item>
                    <el-button type="primary" @click="bindConfirm">统计</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div ref="chartDom" style="height: 400px;" :class="chartClass"></div>


    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { statisticsAddAndStream } from '@/api/statistic'
import * as echarts from 'echarts'
import useYear from '@/hooks/useYear'//
const form = reactive({
    time: 'month',
    year: '2021',
    startYear: '2021',
    endYear: '2024'
})
//动态生成年份
const { yearRange } = useYear()
// 绘制统计图
const chartDom = ref(null)
//绘制课程统计
let chartInstance = ref(null)
const option = reactive({
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['流失', '新增']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            name: "人数"
        }
    ],
    yAxis: [
        {
            name: "",
            type: 'category',
            axisTick: {
                show: false
            },
            data: []
        }
    ]
    ,
    series: [
        {
            name: '新增',
            type: 'bar',
            color: 'Coral',
            stack: 'Total',
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '流失',
            color: 'Olive',
            type: 'bar',
            stack: 'Total',
            emphasis: {
                focus: 'series'
            },
            data: []
        }
    ]
})
onMounted(async () => {
    await nextTick()
    setTimeout(()=>{
        if (chartDom.value) {
            chartInstance = echarts.init(chartDom.value)
        }
    },500); // 确保DOM已经渲染完成
   
})
// 销毁ECharts实例
onUnmounted(() => {
    if (chartInstance != null && chartInstance.dispose) {
        chartInstance.dispose();
    }
})
//取消按钮  class属性绑定 当点击取消的时候 设置图标不显示
const chartClass = ref('mt20')
const bindConfirm = () => {
     chartClass.value = 'mt20'
    //展示统计的列表
    //按照年月分配
    statisticsAddAndStream(form).then(res => {
        console.log(res)
        const info = res.data.data
       //标题
        option.title.text = info.title;
        //时间list
        option.yAxis[0].data = info.time;
        //时间轴单位
        option.yAxis[0].name = info.xname;
        //新增list
        option.series[0].data = info.data;
        //流失list
        option.series[1].data = info.data2;
        chartInstance.setOption(option)
    })
}
//取消按钮
const cancel = () => {
    form.year = "2021"
    form.time = "month"
    // chartInstance.dispose()
     chartClass.value = 'mt20 d'

}
</script >
<style lang="less" scoped>
.mt20{
   margin-top: 20px;
}
.d{
    display: none;
}
.form-demo {
    width: 70%;
    padding-left: 10%;
}

.form-demo .el-select {
    width: 200px;
}
</style>
